// 批量操作功能模块
const React = window.React;
const ReactDOM = window.ReactDOM;
const { message, Modal, notification } = window.antd;

// 批量操作管理类
export default class BatchOperations {
    constructor() {
        this.selectedItems = new Set();
        this.operationHistory = [];
    }

    init() {
        // 初始化DOM元素
        this.contentWrapper = document.querySelector('.content-wrapper');
        if (!this.contentWrapper) {
            this.contentWrapper = document.createElement('div');
            this.contentWrapper.className = 'content-wrapper';
            document.querySelector('.main-container').appendChild(this.contentWrapper);
        }

        // 创建批量操作界面
        this.contentWrapper.innerHTML = `
            <div class="batch-operations-container">
                <div class="operations-toolbar">
                    <div class="toolbar-info">已选择 0 个项目</div>
                    <div class="toolbar-actions">
                        <button data-action="select-all">全选</button>
                        <button data-action="batch-update">批量更新</button>
                        <button data-action="batch-delete">批量删除</button>
                        <button data-action="export">导出数据</button>
                    </div>
                </div>
                <div class="operations-list-content"></div>
            </div>
        `;

        // 初始化事件监听
        this.initEventListeners();

        // 加载测试数据
        this.loadTestData();
    }

    // 初始化事件监听
    initEventListeners() {
        const toolbar = document.querySelector('.operations-toolbar');
        if (toolbar) {
            toolbar.addEventListener('click', (e) => {
                const action = e.target.dataset.action;
                if (action) {
                    this.handleToolbarAction(action);
                }
            });
        }

        // 监听项目选择事件
        document.addEventListener('change', (e) => {
            if (e.target.matches('.item-select')) {
                const itemId = e.target.closest('.operation-item').dataset.id;
                if (e.target.checked) {
                    this.selectedItems.add(itemId);
                } else {
                    this.selectedItems.delete(itemId);
                }
                this.updateToolbar();
            }
        });
    }

    // 处理工具栏操作
    handleToolbarAction(action) {
        switch (action) {
            case 'select-all':
                this.toggleSelectAll();
                break;
            case 'batch-update':
                this.showBatchUpdateDialog();
                break;
            case 'batch-delete':
                this.confirmBatchDelete();
                break;
            case 'export':
                this.exportData();
                break;
        }
    }

    // 切换全选状态
    toggleSelectAll() {
        const checkboxes = document.querySelectorAll('.item-select');
        const allChecked = Array.from(checkboxes).every(cb => cb.checked);

        checkboxes.forEach(checkbox => {
            checkbox.checked = !allChecked;
            const itemId = checkbox.closest('.operation-item').dataset.id;
            if (!allChecked) {
                this.selectedItems.add(itemId);
            } else {
                this.selectedItems.delete(itemId);
            }
        });

        this.updateToolbar();
    }

    // 显示批量更新对话框
    showBatchUpdateDialog() {
        if (this.selectedItems.size === 0) {
            message.warning('请先选择要更新的项目');
            return;
        }

        Modal.confirm({
            title: '批量更新',
            content: React.createElement(
                'div',
                { className: 'batch-update-form' },
                React.createElement('p', null, `确定要更新选中的 ${this.selectedItems.size} 个项目吗？`)
            ),
            onOk: () => {
                this.performBatchUpdate();
            }
        });
    }

    // 执行批量更新
    performBatchUpdate() {
        // 实际应用中这里会调用API进行更新
        message.success(`已更新 ${this.selectedItems.size} 个项目`);
        this.selectedItems.clear();
        this.updateToolbar();
    }

    // 确认批量删除
    confirmBatchDelete() {
        if (this.selectedItems.size === 0) {
            message.warning('请先选择要删除的项目');
            return;
        }

        Modal.confirm({
            title: '确认删除',
            content: `确定要删除选中的 ${this.selectedItems.size} 个项目吗？`,
            onOk: () => {
                this.performBatchDelete();
            }
        });
    }

    // 执行批量删除
    performBatchDelete() {
        // 实际应用中这里会调用API进行删除
        message.success(`已删除 ${this.selectedItems.size} 个项目`);
        this.selectedItems.clear();
        this.updateToolbar();
    }

    // 导出数据
    exportData() {
        if (this.selectedItems.size === 0) {
            message.warning('请先选择要导出的项目');
            return;
        }

        // 实际应用中这里会调用API导出数据
        message.success(`已导出 ${this.selectedItems.size} 个项目的数据`);
    }

    // 更新工具栏信息
    updateToolbar() {
        const info = document.querySelector('.toolbar-info');
        if (info) {
            info.textContent = `已选择 ${this.selectedItems.size} 个项目`;
        }
    }

    // 加载测试数据
    loadTestData() {
        const testData = Array.from({ length: 10 }, (_, i) => ({
            id: i + 1,
            name: `测试项目 ${i + 1}`,
            status: i % 2 === 0 ? '已完成' : '进行中',
            createTime: new Date().toLocaleString()
        }));

        const listContent = document.querySelector('.operations-list-content');
        if (listContent) {
            listContent.innerHTML = testData.map(item => this.renderItem(item)).join('');
        }
    }

    // 渲染列表项
    renderItem(item) {
        return `
            <div class="operation-item" data-id="${item.id}">
                <input type="checkbox" class="item-select">
                <div class="item-info">
                    <h3>${item.name}</h3>
                    <div class="item-status">${item.status}</div>
                    <div class="item-time">${item.createTime}</div>
                </div>
            </div>
        `;
    }
}